import * as THREE from "three";
import { CSS3DObject } from "three/addons/renderers/CSS3DRenderer.js";
// 省会城市对象
const provinceNameObj = {};
// 光圈数组
const apertureArr = [];

function createProvinceName(center, name, index) {
  // 页面dom元素
  const dom = document.getElementById("provinceName").cloneNode();
  dom.innerHTML = name;
  // 将其转换成CSS3D对象
  const css3DObject = new CSS3DObject(dom);
  dom.style.pointerEvents = "none";
  css3DObject.position.set(center[0], -center[1], 0);
  css3DObject.scale.set(0.03, 0.03, 0.03);
  const apertureMesh = createAperture(index);
  css3DObject.add(apertureMesh);
  return css3DObject;
}

// 创建光圈
function createAperture(index) {
  // 创建纹理贴图
  const textureLoader = new THREE.TextureLoader();
  // 创建平面矩形
  const apertureGeometry = new THREE.PlaneGeometry(2, 2);
  // 创建材质开启透明设置纹理贴图
  const apertureMaterial = new THREE.MeshBasicMaterial({
    map: textureLoader.load("./light.png"),
    transparent: true,
    side: THREE.DoubleSide,
    color: "#00FFFF",
    depthTest: false,
  });
  const apertureMesh = new THREE.Mesh(apertureGeometry, apertureMaterial);
  apertureMesh.position.z += 1;
  apertureMesh.name = "光圈";
  //  创建光圈时2-5倍随机放大
  let size = Math.random() * 15 + 10;
  apertureMesh.scale.set(size, size, size);
  // 保存这个随机放大倍数
  apertureMesh._s = size;
  // 设置模型渲染顺序，避免起冲突
  apertureMesh.renderOrder = index + 1;
  apertureArr.push(apertureMesh);
  return apertureMesh;
}

export { createProvinceName, provinceNameObj, apertureArr };
